<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t('route.clientVersion') }}
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="(params) => {
              params.search = searchValue;
              if (tableSearch) {
                params.page = 1;
                tableSearch = false;
              }
              return $pandaApi.apiGetClientVersions(params);
            }"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button type="primary" class="icon-button setting-button" style="width: auto;" @click="versionUpdate()">
                  <i class="iconfont iconzhongyiicon_shangchuan" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('clientVersionManage.uploadVersion') }}</span>
                </el-button>
                <el-button class="icon-button setting-button" style="width: auto; margin-left: 10px;" @click="batchDeleteVersion(tableSlotData.table.selectRows)" :disabled="tableSlotData.table.selectRows.length <= 0">
                  <i class="el-icon-delete" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('clientVersionManage.deleteVersion') }}</span>
                </el-button>
              </div>
              <div class="table-right-options">
                <el-input :placeholder="$t('clientVersionManage.searchVersion')" @keyup.enter.native="tableSearchChange(tableSlotData)" style="width:200px" v-model="searchValue">
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column
                prop="name"
                :label="$t('common.name')"
                width="180">
                <template #default="props">
                  <link-button :content="props.row.name" :isName="true" :size="10" :font-size="'12px'" @click="initClientDetail(props.row)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="version_number"
                :label="$t('clientVersionManage.versionNumber')">
              </el-table-column>
              <el-table-column
                prop="file_size"
                :label="$t('clientVersionManage.fileSize')">
                <template #default="props">
                  <span>{{ myBytesToSize(props.row.file_size) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="created_at"
                :label="$t('clientVersionManage.uploadTime')">
                <template #default="props">
                  <span>{{ myParseTime(new Date(props.row.created_at)) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="is_default"
                :label="$t('clientVersionManage.defaultVersion')">
                <template #default="props">
                  <el-switch
                    :class="language === 'zh' ? '' :'el-switch-en'"
                    @change="changeDefaultVersion(props)"
                    v-model="props.row.is_default">
                  </el-switch>
                </template>  
              </el-table-column>
              <el-table-column
                prop="is_force_update"
                :label="$t('clientVersionManage.forceUpdate')"
                >
                <template #default="props">
                  <el-switch
                    :class="language === 'zh' ? '' :'el-switch-en'"
                    :disabled="!props.row.is_default"
                    @change="$pandaApi.apiPatchClientVersion(props.row.id, props.row).then(()=>{
                      props._self.tableSlotData.refresh()
                    })"
                    v-model="props.row.is_force_update">
                  </el-switch>
                </template>  
              </el-table-column>
              <el-table-column
                prop="p8"
                :label="$t('common.action')">
                <template #default="scope">
                  <el-link  :underline="false"  type="primary"  style="font-size:12px" @click="downloadVersion(scope.row)">{{$t('clientVersionManage.downloadVersion')}}</el-link>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <!-- 删除终端版本 -->
              <version-delete ref="deleteVersionDialog" :delete-method="(dataList) => $pandaApi.apiDeleteClientVersion(dataList).then(() => {
                  $message.success($t('clientVersionManage.deleteVersionSuccess'))
                  tableSlotData.table.deleteRefresh(dataList.length);
                }).catch(()=>{
                  $message.error($t('clientVersionManage.deleteVersionFail'))
                  tableSlotData.table.deleteRefresh(dataList.length);
                })">
              </version-delete>
              <!-- 上传版本 -->
              <version-upload ref="upload" :version-upload-method="() => { tableSlotData.table.deleteRefresh() }"></version-upload>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
    <!-- 版本详情详情 -->
    <form-dialog
      :visible="versionDetailDialogProps.visible"
      :title="versionDetailDialogProps.title"
      @handleClose="close"
      :width="'600px'"
    >
      <template v-slot:content>
        <version-detail :clientVersionData="clientVersionData"></version-detail>
      </template>
      <template v-slot:footer>
        <el-button type="primary" @click="close">{{ $t('common.confirm') }}</el-button>
      </template>
    </form-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../../components/Basic/Table/BasicTable.vue';
import LinkButton from '../../../components/Basic/Button/LinkButton.vue';
import FormDialog from '../../../components/Dialog/formDialog.vue';
import VersionUpload from './version_upload.vue';
import VersionDetail from './version_detail.vue';
import VersionDelete from './version_delete.vue';
import { parseTime, formatSeconds, bytesToSize } from "../../../utils/index"
import { AppModule } from '../../../store/modules/app';
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    FormDialog,
    VersionUpload,
    VersionDetail,
    VersionDelete
  },
  data() {
    return {
      tableData:[],
      VersionUploadDialogProps: {
        visible: false,
        title: this.$t('clientVersionManage.uploadVersion').toString()
      },
      versionDetailDialogProps: {
        visible: false,
        title: ''
      },
      clientVersionData: '',
      searchValue: '',
      language: '',
      tableSearch: false
    }
  },
  mounted() {
    (this as any).language = (AppModule.language)
  },
  methods: {
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    // 上传版本
    versionUpdate() {
      (this as any).$refs['upload'].init({
        title: (this as any).$t('clientVersionManage.uploadVersion')
      });
    },
    // 删除终端版本
    batchDeleteVersion(selectRows: Array<any>) {
      (this as any).$refs.deleteVersionDialog.init({
        title: (this as any).$t('clientVersionManage.deleteVersion'),
        tip: (this as any).$t('clientVersionManage.sureDeleteVersion'),
        versionList: selectRows
      });
    },
    // 下载版本
    downloadVersion(row: any) {
      const downloadLink = process.env.VUE_APP_SERVER_ADDR + "/versions/" + row.download_link;
      const link = document.createElement('a');
      link.style.display = 'none';
      link.setAttribute('href', downloadLink)
      link.setAttribute('download',row.name)
      document.body.appendChild(link);
      link.click();
      this.$nextTick(() => {
        document.body.removeChild(link);
      });
    },

    changeDefaultVersion(props: any) {
      if(props.row.is_default === false) {
        props.row.is_force_update = false
      }
      (this as any).$pandaApi.apiPatchClientVersion(props.row.id, props.row).then(()=>{
        props._self.tableSlotData.refresh()
      })
    },

    closeVersion() {
      this.VersionUploadDialogProps.visible = false
    },

    submitFile() {
      (this.$refs['upload'] as any).submitF()
    },

    myBytesToSize(size: any) {
      return bytesToSize(size);
    },

    myParseTime(t: any) {
      return parseTime(t);
    },

    // 终端版本详情
    initClientDetail(row: any) {
      this.clientVersionData = row
      this.versionDetailDialogProps.title = row.name
      this.versionDetailDialogProps.visible = true
    },

    // 详情关闭
    close() {
      this.versionDetailDialogProps.visible = false
    },
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }

  ::v-deep .el-table .cell {
    overflow: inherit;
  }

  ::v-deep .el-switch__core {
    border-radius: 20px;
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
